import { defineStore } from 'pinia'
import type { Params } from '@/types/common'
import { stringToPageId } from '@/hooks/usePageId'
export interface Theme {
  readonly uuid: number
  title: string
  subtitle?: string
  background: string
  backgroundImage?: string
}

const theme: Theme[] = [
  {
    uuid: 0,
    title: 'list.home.title',
    subtitle: new Date().toLocaleDateString(),
    background: '#c4514c',
    backgroundImage: ''
  },
  {
    uuid: 1,
    title: 'list.main.title',
    background: '#8ab29f',
    backgroundImage: ''
  },
  {
    uuid: 2,
    title: 'list.plan.title',
    background: '#339fa1',
    backgroundImage: ''
  },
  {
    uuid: 3,
    title: 'list.distribution.title',
    background: '#6579c8',
    backgroundImage: ''
  },
  {
    uuid: 4,
    title: 'list.assign.title',
    background: '#7b8994'
  },
  {
    uuid: 5,
    title: 'list.task.title',
    background: '#9fb3df'
  },
  {
    uuid: 6,
    title: '白色',
    background: '#fff',
    backgroundImage: ''
  },
  {
    uuid: 9,
    title: 'test',
    background: '#7b8994',
    backgroundImage: ''
  },
  {
    uuid: 10,
    title: 'test2',
    background: '#7b8994',
    backgroundImage: ''
  },
  {
    uuid: 12,
    title: 'test3',
    background: '#7b8994',
    backgroundImage: ''
  }
]

const useThemeStore = defineStore('theme', {
  state: (): Theme[] => {
    return [
      {
        uuid: 0,
        title: 'list.home.title',
        subtitle: new Date().toLocaleDateString(),
        background: '#c4514c'
      },
      {
        uuid: 1,
        title: 'list.main.title',
        background: '#8ab29f'
      },
      {
        uuid: 2,
        title: 'list.plan.title',
        background: '#339fa1'
      },
      {
        uuid: 3,
        title: 'list.distribution.title',
        background: '#6579c8'
      },
      {
        uuid: 4,
        title: 'list.assign.title',
        background: '#7b8994'
      },
      {
        uuid: 5,
        title: 'list.task.title',
        background: '#9fb3df'
      },
      {
        uuid: 6,
        title: '白色',
        background: '#fff'
      },
      {
        uuid: 9,
        title: 'test',
        background: '#7b8994'
      },
      {
        uuid: 10,
        title: 'test2',
        background: '#7b8994'
      },
      {
        uuid: 12,
        title: 'test3',
        background: '#7b8994'
      }
    ]
  },

  actions: {
    /**
     * @desc 获取主题配置
     * @param params 路由参数
     */
    getTheme(params: Params): Theme | null {
      const uuid = stringToPageId(params?.category ?? params.uuid!)
      return this.$state.find((theme) => theme.uuid === uuid) || null
    },

    /**
     * @desc 获取所有自定义主题
     */
    getCustomTheme(): Theme[] {
      return this.$state.filter((theme) => theme.uuid > 8)
    },

    /**
     * @param theme 自定义主题配置
     */
    addTheme(theme: Theme) {
      this.$state.push(theme)
    },

    /**
     * @desc 移除目录
     * @param uuid 移除目录的uuid
     */
    removeTheme(uuid: number) {
      this.$state.splice(
        this.$state.findIndex((item) => item.uuid === uuid),
        1
      )
    },

    /**
     * @kdesc 更新菜单主题配置
     */
    updateTheme(uuid: number, theme: Theme) {
      const index = this.$state.findIndex((item) => item.uuid === uuid)
      this.$state[index] = theme
    },

    reset() {
      this.$patch(theme)
    }
  },

  // getters: {
  //   getTypeName: (state, uuid?:number, category?: string) => {

  //   }
  // },

  persist: {
    key: 'themeconfig'
  }
})

export { useThemeStore }
